<script setup lang="ts">
import {message} from "ant-design-vue";

// 自动获取商品分类组件 选择组件
import {WxtBiddingConstraintType, WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  showAll: { // 是否显示 全部分类
    type: Boolean,
    default: true,
  },
  bizCode: { // 业务代码
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode["消费者运营-拉新快"],
  },
  promotionScene: { // 推广场景
    type: String as PropType<WxtBiddingConstraintType>,
    default: WxtBiddingConstraintType.促进全店成交,
  },
  width: {
    type: String,
    default: '120px',
  },
  size: {
    type: String,
    default: 'small',
  },
});
const emit = defineEmits([
  "update:value",
]);
const categoryList = ref<{
  categoryId: number | undefined;
  categoryName: string;
  parentCategoryId: number | undefined;
}[]>([]);
const loadCategory = async () => {
  WxtUtils.customRequest('https://one.alimama.com/shopcategory/findList.json', props.bizCode, {
    itemSelectedMode: 'userDefinedItem',
    materialType: 1,
    needQualification: true,
    optimizeTarget: 'conv',
    promotionScene: props.promotionScene,
    promotionType: 'item',
    subPromotionType: 'item',
  }).then((res: any) => {
    if (res.data.info.ok) {
      if (props.showAll) {
        categoryList.value = [{
          categoryId: 0,
          categoryName: '全部分类',
          parentCategoryId: undefined,
        }, ...res.data.data.list];
      } else {
        categoryList.value = res.data.data.list;
      }
    } else {
      message.error(res.info.message);
    }
  });
};
watch(() => props.bizCode, (newVal) => {
  loadCategory();
});
onMounted(() => {
  loadCategory();
});
</script>

<template>
  <a-select :value="value" @change="(e)=>{
    emit('update:value',e);
  }" :style="{
    width: width,
  }" :size="size" placeholder="请选择类目"
  >
    <a-select-option v-for="item in categoryList" :key="item.categoryId" :value="item.categoryId">
      {{ item.categoryName }}
    </a-select-option>
  </a-select>
</template>

<style scoped>

</style>
